<template>
	<div style="height: 100%;">

		<div style="padding: 10px;border-radius: 8px;border: 1px solid#f5f5f5;" class="displayFlexBet bgfff">
			<div class="displayFlex">
				<span style="margin-right: 10px;color: #999;">开始时间</span>
				<el-date-picker v-model="params.startTime" placeholder="开始时间" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" type="date" size="small" class="w130px">
				</el-date-picker>
				<img src="@/assets/sIcon83.png" style="width: 20px;height: 5px;" class="ml10 mr10" />
				<span style="margin-right: 10px;color: #999;">结束时间</span>
				<el-date-picker v-model="params.endTime" placeholder="结束时间" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" type="date" size="small" class="ml10 w130px">
				</el-date-picker>
				<el-button icon="el-icon-search" type="primary" @click="search()" size="small"
					class="ml10">查询</el-button>
			</div>
		</div>


		<div class="displayFlexBet bgfff pad15 mb10 color555 mt10" style="border-radius: 8px;">
			<div style="flex: 2;">批次</div>
			<div style="flex: 2;">状态</div>
			<div style="flex: 2; ">监测数据</div>
			<div style="flex: 1; ">结果</div>
			<div style="flex: 2; ">计划时间</div>
			<div style="flex: 2; ">监测时间</div>
			<div style="flex: 2; ">经办人</div>
			<div style="flex: 3; ">报告</div>
			<div style="flex: 2;">操作</div>
		</div>

		<div style="border-radius: 8px;" class="color555 bgfff">
			<div class="displayFlexBet pad10 color555 point font13" v-for="(item,index) in tableData.list" :key="index"
				style="border-bottom:1px solid#F8F7F9">
				<div style="flex:2">{{item.batchNo}}</div>
				<div style="flex:2" class="displayFlex">
					<img v-if="item.statusStr == '已完成'" src="@/assets/sIcon86.png" style="width: 15px;height: 15px;"
						class="mr10" />
					<img v-else src="@/assets/sIcon87.png" style="width: 15px;height: 15px;" class="mr10" />
					{{item.statusStr}}
				</div>
				<div style="flex:2" class="">{{item.monitorValue}}</div>
				<div style="flex:1" class="">{{item.resultStr}}</div>
				<div style="flex:2" class="">{{item.planTime}}</div>
				<div style="flex:2" class="" v-if="item.monitorTime">{{item.monitorTime.split(" ")[0]}}</div>
				<div style="flex:2" class="" v-else></div>
				<div style="flex:2" class="">{{item.submitByName}}</div>
				<div style="flex:3" class="">{{item.fileName}}</div>

				<div style="flex: 2;display: flex;justify-content: flex-start;">
					<div style="background: #DCEBFC;padding: 4px 10px;color:#426AB3;border-radius: 20px;"
						class="font12 point" @click.stop="jiance(item)">监测</div>
				</div>

			</div>
			<el-empty v-if="tableData.list.length == 0" />
		</div>


		<el-dialog v-if="visible1" :visible.sync="visible1" width="530px" :title="'监测报告'" @close="closeDia" top="50px">
			<el-form ref="form" label-width="100px" :rules="formRules" :model="submitParams">
				<el-form-item label="监测时间" prop="monitorTime">
					<el-date-picker type="datetime" placeholder="监测时间" v-model="submitParams.monitorTime"
						style="width: 100%;" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="报告时间" prop="reportTime">
					<el-date-picker type="date" placeholder="报告时间" v-model="submitParams.reportTime"
						style="width: 100%;">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="昼间监测值" prop="daytimeValue">
					<div class="displayFlexBet">
						<el-input placeholder="昼间监测值" style="width: 200px;"
							v-model="submitParams.daytimeValue"></el-input>
						<span style="color:#B2B2B2;font-size: 11px;margin-left: 10px;">限值：昼间 65dB(A)；夜间65dB(A)</span>
					</div>
				</el-form-item>

				<el-form-item label="夜间监测值" prop="nightValue">
					<div class="displayFlexBet">
						<el-input placeholder="夜间监测值" style="width: 200px;"
							v-model="submitParams.nightValue"></el-input>
					</div>
				</el-form-item>

				<el-form-item label="文件">
					<el-upload accept=".doc,docx" :limit="1" :multiple="false" :file-list="submitParams.fileList"
						action="#" drag :auto-upload="false" :on-change="changeFile" :on-remove="removeFile"
						:on-exceed="uploadFileOver">
						<div class="displayFlex">
							<img src="@/assets/sIcon84.png" style="width: 15px;height: 15px;" class="mr10" />
							<span>上传文件</span>
						</div>
					</el-upload>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: right!important;margin-top: 20px;">
				<el-button type="primary" size="small" @click="save()" :loading="isLoading">确 定</el-button>
				<el-button size="small" @click="cancle" style="background: #EBEBFE;color:#3A3EF4">取 消</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import $ from 'jquery'
	import uploadWord from '@/components/upload/uploadWord'
	import moment from 'moment'

	let that
	let APPKEY = '5da5441f62e48aedc7a3853ffc75c2db';
	let PRODID = 'gf';
	let UPLOAD_ACTION = '/upload';
	let VIEW_ACTION = '/view';
	let REMOVE_ACTION = '/remove';
	let IMGURL = 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload';
	export default {
		components: {
			uploadWord
		},
		data() {
			return {
				isLoading: false,
				fileViewUrl: 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
				selectItem: '',
				params: {
					ticketId: '',
					startTime: "",
					endTime: "",
					surveyId: '',
				},
				visible1: false,
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 99999,
					list: []
				},

				submitParams: {
					id: "", // 详情id
					monitorTime: '', // 监测时间 （精确到时分秒，虽然我也不知道精确到哪）
					reportTime: '', // 报告时间,
					monitorValue: '', // 监测值
					fileId: '', // 文件id
					fileList: [],
					file: {},
					nightValue: '',
					daytimeValue: ''
				},

				formRules: {
					monitorTime: [{
						required: true,
						message: '请选择监测时间',
						trigger: 'change',
					}],
					reportTime: [{
						required: true,
						message: '请选择报告时间',
						trigger: 'change',
					}],
					monitorValue: [{
						required: true,
						message: '请输入监测值',
						trigger: 'blur',
					}]
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params.ticketId = that.$store.state.token
			that.params.surveyId = that.getQueryString("id")
			that.getTableData()
		},
		methods: {

			cancle() {
				that.visible1 = false
				that.submitParams = that.$options.data().submitParams
			},

			jiance(item) {
				that.visible1 = true
				that.submitParams = JSON.parse(JSON.stringify(item))
				that.submitParams.id = item.id
			},

			uploadFile: function(callback) {
				if (that.submitParams.fileId) {
					callback(that.submitParams.fileId)
				} else {
					var formdata = new FormData()
					formdata.append("file", that.submitParams.file.raw);
					formdata.append("appKey", APPKEY);
					formdata.append("businessCode", that.randomChar(19));
					formdata.append("prodID", PRODID);
					$.ajax({
						url: IMGURL + '/upload',
						data: formdata,
						type: 'POST',
						dataType: 'json',
						contentType: false,
						processData: false,
						success: function(result) {
							var fileId = result.message.fileID;
							callback(fileId);
						},
						error: function() {}
					})
				}
			},

			save() {
				// if (!that.submitParams.id) {
				// 	if (!that.submitParams.file.raw) {
				// 		return this.$message({
				// 			message: '请上传文件',
				// 			type: 'warning'
				// 		});
				// 	}
				// }

				that.uploadFile(function(fileId) {
					let thisPamas = JSON.parse(JSON.stringify(that.submitParams))
					thisPamas.fileId = fileId
					thisPamas.monitorTime = thisPamas.monitorTime + ":00"

					that.$refs.form.validate((valid) => {
						if (valid) {
							that.isLoading = true
							that.ajax({
								url: "noise/survey/submit",
								dataType: 'json',
								contentType: 'application/json',
								data: JSON.stringify(thisPamas),
								success: function(result) {
									that.isLoading = false
									if (result.data) {
										that.cancle()
										that.getTableData()

										return that.$message({
											message: '保存成功',
											type: 'success'
										});
									} else {
										return that.$message({
											message: result.infoList[0],
											type: 'error'
										});
									}

								}
							})
						}
					})

				})
			},

			uploadFileOver(files, fileList) {
				return this.$message({
					message: '请上传文件数量已超出，点击删除后重新上传文件',
					type: 'warning'
				});
			},

			changeFile: function(file, fileList) {
				file.url = URL.createObjectURL(file.raw);
				that.submitParams.fileList = fileList
				that.submitParams.file = file;
			},

			removeFile() {
				that.submitParams.fileList = []
				that.submitParams.file = ''
			},

			downLoadWord(item) {
				window.open(that.fileViewUrl + item.fileId)
			},

			uploadFileFunc(item) {
				that.visible1 = true
				that.selectItem = item
			},

			closeDia() {
				that.visible1 = false
				if (that.$refs.uploadWord) that.$refs.uploadWord.removeFile()
			},

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle() {
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"
				let apiName = "sw/standBook/createProduceStandBookExcel"

				apiName = apiName + '?ticketId=' + that.params.ticketId + "&facilitatorId=" + that.params.facilitatorId
				if (that.params.startTime) apiName = apiName + '&startTime=' + that.params.startTime
				if (that.params.endTime) apiName = apiName + '&endTime=' + that.params.endTime
				window.open(appPath + apiName)
			},

			getTableData() {
				let apiName = "/noise/survey/getItemList"
				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that.tableData
						.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.planTime = item.planTime.split(" ")[0]
								item.completeTime = item.completeTime ? item.completeTime.split(" ")[0] : ''
							}
							that.tableData.list = result.data;
						}
					},
				})
			},

			randomChar: function(l) {
				var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
				var tmp = "";
				var timestamp = new Date().getTime();
				for (var i = 0; i < l; i++) {
					tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
				}
				return timestamp + tmp;
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}

	>>>.el-upload-dragger {
		border: unset;
		height: auto !important;
	}
</style>